<template>
  <div>
    <nav-menu></nav-menu>
    <div v-if="paper.Chinese_title" v-title :data-title="'文章信息-'+paper.Chinese_title"></div>
    <div v-else-if="paper.English_title" v-title :data-title="'文章信息-'+paper.English_title"></div>

    <div v-if="showFlag" class="body">
      <el-divider>论文信息</el-divider>
      <div class="container">
        <div class="paper">
          <div class="brief">
            <h2 v-if="paper.Chinese_title">{{ paper.Chinese_title }}</h2>
            <h2 v-else-if="paper.English_title">{{ paper.English_title }}</h2>
            <h2 v-else>论文名字缺失(检索中)</h2>

            <h3 class="author">
                  <span style="margin-right:12px;" v-for="(item,key) in paper.author" :key="key">{{ item }}
                    <sup>{{ key + 1 }}</sup>
                  </span>
            </h3>
            <h3 class="author">
                  <span style="margin-right:12px;" v-for="(item,key) in paper.institution" :key="key">{{ item }}
                    <sup>{{ key + 1 }}</sup>
                  </span>
            </h3>
          </div>
          <div class="row">
            <span class="rowtit">摘要：</span>
            <span id="ChDivSummary" name="ChDivSummary" class="abstract-text">{{ paper.Chinese_abstract }}</span>
          </div>
          <div class="row">
            <span class="rowtit">Abstract：</span>
            <span id="EnDivSummary" name="ChDivSummary" class="abstract-text">{{ paper.English_abstract }}</span>
          </div>
          <div class="row">
            <span class="rowtit">关键词：</span>
            <span v-for="(item,key) in paper.Chinese_keywords" :key="key">{{ item }};</span>
          </div>
          <div class="row">
            <span class="rowtit">Keywords：</span>
            <span v-for="(item,key) in paper.English_keywords" :key="key">{{ item }};</span>
          </div>
          <div class="row">
            <span class="rowtit">来源：</span>
            <span v-for="(item,key) in paper.from" :key="key">
                  <span v-if="item.Chinese_name">{{ item.Chinese_name }};</span>
                  <span v-else-if="item.English_name">{{ item.English_name }};</span>
                  <span v-else></span>
                </span>
          </div>

          <el-button v-if="isCollect" plain icon="el-icon-star-off" style="float: right;margin: 10px 10px 10px 10px"
                     @click="collectPaper">取消收藏
          </el-button>
          <el-button v-else type="primary" icon="el-icon-star-on" style="float: right;margin: 10px 10px 10px 10px"
                     @click="collectPaper">收藏
          </el-button>
          <!--          &lt;!&ndash;        <div class="row">&ndash;&gt;-->
          <!--          &lt;!&ndash;          <span class="rowtit">基金资助：</span>&ndash;&gt;-->
          <!--          &lt;!&ndash;          <p>国家重点研发计划项目（2019YFB1703700）；</p>&ndash;&gt;-->
          <!--          &lt;!&ndash;        </div>&ndash;&gt;-->
          <!--          &lt;!&ndash;        <div class="row">&ndash;&gt;-->
          <!--          &lt;!&ndash;          <ul>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">DOI：</span>&ndash;&gt;-->
          <!--          &lt;!&ndash;              <p>10.16055/j.issn.1672-058X.2021.0005.001</p>&ndash;&gt;-->
          <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">专辑：</span>&ndash;&gt;-->
          <!--          &lt;!&ndash;              <p>工程科技Ⅱ辑</p>&ndash;&gt;-->
          <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">专题：</span>&ndash;&gt;-->
          <!--          &lt;!&ndash;              <p>航空航天科学与工程</p>&ndash;&gt;-->
          <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">分类号：</span>&ndash;&gt;-->
          <!--          &lt;!&ndash;              <p>V263.1</p>&ndash;&gt;-->
          <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
          <!--          &lt;!&ndash;          </ul>&ndash;&gt;-->
          <!--          &lt;!&ndash;        </div>&ndash;&gt;-->
          <!--&lt;!&ndash;          <div class="row">&ndash;&gt;-->
          <!--&lt;!&ndash;            <el-button style="float: right">下载</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;          </div>&ndash;&gt;-->
        </div>
      </div>

      <el-divider>知识图谱</el-divider>

      <div class="gContainer">
        <div class="chart_graph">
          <chartOCGraph :nodes="nodes" :links="links"></chartOCGraph>
        </div>
      </div>

      <el-divider>图表</el-divider>
      <div class="chart_pie">
        <div>文献检索关键词对应文献量分布</div>
        <el-select size="small" v-model="value" placeholder="请选择">
          <el-option
              v-for="item in times"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <!--      <el-button>{{$refs.knowledgeGraph.selectNodeData.name}}</el-button>-->
        <chartPie :data="distribution[value]"></chartPie>
      </div>
      <div class="chart_barVec">
        <div>研究热度</div>
        <chartBarVertical :xAxis="bartimes" :data="cites"></chartBarVertical>
      </div>
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import chartPie from "@/components/chartPie";
import chartBarVertical from "@/components/chartBarVertical";
import chartOCGraph from "@/components/chartOCGraph";
import NavMenu from "@/components/NavMenu";

export default {
  name: 'paper',
  components: {
    NavMenu,
    // graphHover,
    // gSearch,
    chartPie,
    chartBarVertical,
    chartOCGraph
  },
  data() {
    return {
      id: '',
      title: '',
      resource: '',
      showFlag: true,

      // d3jsonParser()处理 json 后返回的结果
      buttonWord: '测试',
      retJson: '{}',
      retData: {},

      paper: {
        id: '',
        filepath: '',
        pubdate: '',
        year: '',
        month: '',
        institution: [],
        Chinese_keywords: [],
        English_keywords: [],
        Chinese_abstract: '',
        English_abstract: '',
        author: [],
        Chinese_title: '',
        English_title: '',
        from: ''
      },

      // Pie Chart
      times: [],
      value: '',
      distribution: {},

      nodes: [],
      links: [],

      // Bar Chart
      bartimes: [],
      cites: [],

      isLogin: false,
      isCollect: false,
      userId: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$message.success('加载数据中...')
      if (JSON.stringify(this.$route.query) === '{}') {
        this.$message.error('跳转参数错误')
      } else {
        this.id = this.$route.query.id
        // this.title = this.$route.query.title
        // this.resource = this.$route.query.resource
      }

      Vue.prototype.post('http://192.168.0.94:2226/show_paperpage', {
        id: this.id
      }, this.onGetDataSucc)
    },
    onGetDataSucc(response) {
      console.log('paperPage-onGetDataSucc:', response.data)
      if (response.data.retcode === 1) {
        this.showFlag = false
        return
      }

      // this.retJson = response.request.responseText
      // this.retData = response.data.data
      this.paper = response.data.paper
      console.log('paper:', this.paper)


      this.nodes = response.data.nodes_data
      this.links = response.data.links_data

      response.data.times.forEach(item => {
        this.times.push({
          label: item,
          value: item
        })
      })
      if (this.times.length > 0) {
        this.value = this.times[0].value
      }

      this.distribution = response.data.distribution

      this.bartimes = response.data.bartimes
      this.cites = response.data.cites

      //   确认收藏情况
      if (localStorage.getItem('userLoginStatus') === 'true') {
        this.isLogin = true
        this.userId = JSON.parse(localStorage.getItem('userInfo')).id
        Vue.prototype.post('http://192.168.0.94:2226/get_user_paper_collect', {
          user_id: this.userId,
          paper_id: this.paper.id
        }, this.initCollectStatus)
      } else {
        this.isLogin = false
        this.isCollect = false
      }
    },
    collectPaper() {
      if (this.isLogin) {
        this.changeCollectStatus()
      } else {
        this.$router.push('/login');
      }
    },
    changeCollectStatus() {
      this.userId = JSON.parse(localStorage.getItem('userInfo')).id
      if (this.isCollect) {
        Vue.prototype.post('http://192.168.0.94:2226/collect_cancel', {
          user_id: this.userId,
          paper_id: this.paper.id
        }, this.cancelCollect)
      } else {
        Vue.prototype.post('http://192.168.0.94:2226/collect', {
          user_id: this.userId,
          paper_id: this.paper.id
        }, this.confirmCollect)
      }
    },
    cancelCollect(res) {
      if (res.data) {
        this.$message({
          type: 'success',
          message: '取消收藏成功'
        });
        this.isCollect = false
      }
    },
    confirmCollect(res) {
      if (res.data) {
        this.$message({
          type: 'success',
          message: '收藏成功'
        });
        this.isCollect = true
      }
    },
    initCollectStatus(res) {
      this.isCollect = res.data.retcode !== 0;
    }
  }
}
</script>

<style lang="scss">
//.header {
//  height: 69px;
//  left: 0;
//  top: 0px;
//  position: absolute;
//  width: 100%;
//}
//
//.header_logo {
//  position: absolute;
//  left: 0px;
//  padding: 4px 28px 0 30px;
//  top: 6px;
//  width: 69px;
//  height: 69px
//}
//
//.header_search {
//  position: absolute;
//  right: 0px;
//  padding: 4px 28px 0 30px;
//  top: 6px;
//}

.body {
  position: absolute;
  // top: 69px;
  left: 0;
  width: 100%;
}

.gContainer {
  position: relative;
  box-shadow: 0 0px 0px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-card {
  //background: #d3dce6;
  color: #000;
  font-weight: bold;
  text-align: left;
}

.bg-card-light {
  color: #000;
  text-align: left;
  font-size: 14px;
  //background: #e5e9f2;
}

.grid-content {
  font-size: 14px;
  padding: 1vh 1vw;
  border-radius: 5px;
  align-items: center;
  //min-height: 2vh;
}

.container {
  padding-top: 15px;
  background-color: #fff;
  margin-left: 15px;
  margin-right: 15px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.paper {
  width: 80%;
  margin: 0 auto 30px;
}

.brief {
  text-align: center;
}

.brief .author {
  padding: 0;
  margin-right: 10px;
  line-height: 27px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  word-break: break-all;
}

.row {
  float: none;
  min-height: 26px;
  padding-top: 8px;
  font-size: 14px;
  color: #000;
  clear: both;
  text-align: justify;
  text-justify: inter-word;
  display: table;
  width: 100%;
}

.row .rowtit {
  display: table-cell;
  vertical-align: top;
  padding-right: 5px;
  line-height: 26px;
  font-weight: bold;
  white-space: nowrap;
  width: 8px;
}

.row .abstract-text, .row .claim-text {
  display: inline;
  color: #666;
  line-height: 26px;
  font-weight: normal;
  text-align: justify;
  text-justify: inter-word;
  word-break: break-all;
}

ul, li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.row li {
  *display: inline;
}

.row span {
  line-height: 26px;
  margin-left: 0px;
  margin-right: 0px;
  color: #666;
  word-break: break-all;
}

.row .top-space + .top-space {
  padding-top: 8px;
}

.chart_pie {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_pie:nth-child(3n) {
  margin-right: 0;
}

.chart_barVec {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_barVec:nth-child(3n) {
  margin-right: 0;
}

.chart_graph {
  border: 1px solid #ededed;
  //width: calc((100% - 30px) * 0.95);
  width: 100%;
  height: 800px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_graph:nth-child(3n) {
  margin-right: 0;
}

.default-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
